import React from "react";
import { Menu, Dropdown } from "antd";
import "./item.css";
import { chatDataItem, chatItemContent } from "@/types/chatType";

const Item: React.FC<chatDataItem> = (props) => {
  const { message_content } = props;
  const parseData = JSON.parse(message_content) as chatItemContent;
  const user_id = localStorage.getItem("user_id");

  const menu = (
    <Menu>
      <Menu.Item>@Ta</Menu.Item>
    </Menu>
  );
  return (
    <div
      className={
        user_id === parseData.form.user_id.toString()
          ? "ChatItem ChatItemSelf"
          : "ChatItem"
      }
    >
      <div className={"ChatHeader"}>
        <Dropdown overlay={menu} placement="bottomLeft" trigger={["click"]}>
          <div className={"UserImg"}>
            <img
              src={"http://124.221.181.19:8000" + parseData.form.user_image}
              alt=""
            /> 
          </div>
        </Dropdown>
      </div>
      <div className={"ChatName"}>{parseData.form.user_nickname}</div>
      <div className={"ChatContainer"}>
        <div>
          <div className={"ChatContent"}>{parseData.content}</div>
        </div>
      </div>
    </div>
  );
};

export default Item;
